<template>
  <el-dialog :visible.sync="show" :title="title" width="400px">
    <el-upload class="upload-demo" drag :action="uploadAction" :headers="headers" :on-success="uploadSuccess">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只能上传视频文件</div>
    </el-upload>
  </el-dialog>
</template>

<script>
import { UserGetterEnum } from '../_/vue/store/user'
export default {
  name: 'XuUploadDialog',
  props: {
    value: Boolean,
    title: {
      type: String,
      default: '上传视频'
    }
  },
  data () {
    return {
      show: this.value
    }
  },
  computed: {
    headers () {
      return { Authorization: this.$store.getters[UserGetterEnum.TOKEN] }
    },
    uploadAction () {
      return this.$baseUrl + '/upload'
    }
  },
  watch: {
    value (val) {
      this.show = val
    },
    show (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    uploadSuccess (res, file) {
      this.show = false
      this.$emit('on-success', res, file)
    }
  }
}
</script>
